<script setup>
import { onMounted, ref, nextTick } from 'vue';
import * as echarts from 'echarts';
import http from '@/utils/api.js';  // 你自定义的 API 请求方法

const chartContainer = ref(null);  // 存储图表的容器
const userData = ref([]);  // 存储每天用户创建的数据

// 获取每天创建的用户数量数据
async function loadUserCountPerDay() {
  try {
    const response = await http.get('/user/count');
    console.log("返回的用户创建数据:", response.data);  // 打印返回的数据
    userData.value = response.data;  // 将返回的数据保存到 userData

    // 在数据加载完成后绘制图表
    nextTick(() => {
      if (userData.value.length > 0) {
        const chart = echarts.init(chartContainer.value);
        const option = {
          title: {
            text: '每天创建的用户数量',
            subtext: '按天统计',
            left: 'center',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          xAxis: {
            type: 'category',
            data: userData.value.map(item => item.date),  // 日期
          },
          yAxis: {
            type: 'value',
            name: '用户数量',
          },
          series: [
            {
              name: '用户数量',
              type: 'bar',
              data: userData.value.map(item => item.user_count),  // 使用 user_count 替代 userCount
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowOffsetY: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        };
        chart.setOption(option);
        chart.resize();  // 强制刷新图表大小
      }
    });
  } catch (error) {
    console.error("获取用户数据失败:", error);
  }
}

onMounted(() => {
  loadUserCountPerDay();
});
</script>

<template>
  <div>
    <div ref="chartContainer" style="width: 100%; height: 400px;"></div> <!-- 确保容器有足够的大小 -->
  </div>
</template>

<style scoped>
/* 你可以根据需要添加样式 */
</style>
